<template>
    <div class="dashboard-container">
        <el-row :gutter="35">
            <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
                <!-- 通知公告统计饼图 -->
                <el-card>
                    <div class="grid-content bg-purple">
                        <div id="chartPie" class="pie-wrap"></div>
                    </div>
                </el-card>
            </el-col>
            <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
                <!-- 通知公告轮播图 -->
                <el-card>
                    <div class="grid-content bg-purple-light">
                        <el-carousel :interval="4000" height="300px" trigger="click">
                            <el-carousel-item v-for="item in notices" :key="item.id">
                                <div class="carousel_title">{{ item.title }}</div>
                                <div class="el-carousel_item">
                                    <el-image class="carousel_img" v-if="item.cover != null" :src="item.cover" @click="openContent(item)"></el-image>
                                    <h1 style="text-align: center" v-else @click="openContent(item)">
                                        {{ item.title }}
                                    </h1>
                                </div>
                            </el-carousel-item>
                        </el-carousel>
                    </div>
                </el-card>
            </el-col>
        </el-row>

        <br />

        <div class="middle_box">
            <el-row :gutter="35">
                <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
                    <!-- 实时动态图 -->
                    <el-card>
                        <div class="grid-content bg-purple">
                            <div id="bigChart" class="bigChart"></div>
                        </div>
                    </el-card>
                </el-col>

                <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6">
                    <!-- 公告列表 -->
                    <el-card>
                        <div class="grid-content bg-purple">
                            <div class="dashboard-box">
                                <p class="dashboard-header">通知</p>
                                <el-link :underline="false" v-for="(item, index) in notifys" :key="item.id" class="notice-link" @click="openContent(item)" type="primary">
                                    <span>{{ index + 1 }}.</span>{{ item.title }}
                                </el-link>
                            </div>
                        </div>
                    </el-card>
                </el-col>

                <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6">
                    <!-- 日志列表 -->
                    <el-card>
                        <p class="dashboard-header">日志</p>
                        <el-collapse v-model="activeName" accordion>
                            <el-collapse-item v-for="notice in journals" :key="notice.id" :title="notice.title" :name="notice.id">
                                <div class="ql-editor" v-html="notice.content"></div>
                            </el-collapse-item>
                        </el-collapse>
                    </el-card>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
// import { mapGetters } from "vuex";
import {
    noticeList,
    getNotice,
    updateNoticeByView,
    getStatistics,
} from "@/api/system/notice";
import { statistics } from "@/api/monitor/operlog";
import * as echarts from "echarts";

export default {
    data() {
        return {
            // 自适应弹框宽度
            dialogWidth: 0,
            //默认关系弹出框
            dialogVisible: false,
            //弹出框使用对象
            notice: {},
            notices: [], //公告
            notifys: [], //通知
            journals: [], //日志
            activeName: undefined,
            //图表实例
            chartPie: null,
            chartLine: null,
            myChart: null,
            value: null,
            //可视化数据
            series: [],
            server: {},
            option: {
                title: {
                    text: "通知公告发布统计",
                    subtext: "实时统计",
                    left: "center",
                },
                tooltip: {
                    trigger: "item",
                },
                legend: {
                    orient: "vertical",
                    left: "left",
                },
                series: [
                    {
                        name: "发布统计",
                        type: "pie",
                        radius: "50%",
                        data: [], //数据
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: "rgba(0, 0, 0, 0.5)",
                            },
                        },
                    },
                ],
            },
            //大数据展示
            optionLog: {
                title: {
                    text: "系统访问日志统计",
                    subtext: "实时统计",
                    left: "center",
                },
                tooltip: {
                    trigger: "item",
                },
                // legend: {
                //     orient: "vertical",
                //     left: "right",
                // },
                series: [
                    {
                        name: "访问日志",
                        type: "pie",
                        radius: "50%",
                        data: [], //数据
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: "rgba(0, 0, 0, 0.5)",
                            },
                        },
                        /*在series中添加itemStyle即可直观显示饼型数值*/
                        itemStyle: {
                            normal: {
                                label: {
                                    show: true,
                                    formatter: "{b} : {c} ({d}%)",
                                },
                                labelLine: { show: true },
                            },
                        },
                    },
                ],
            },
        };
    },
    created() {
        this.setDialogWidth();
        this.initConn();
    },
    mounted() {
        window.onresize = () => {
            return (() => {
                this.setDialogWidth();
            })();
        };
    },

    computed: {
        // ...mapGetters(["nickname"]),
    },

    mounted() {
        // this.getEchartData();
        this.fetchNoticeList();
        this.$nextTick(() => {
            this.drawPieChart();
            this.bigChartsStatistics();
        });
    },

    methods: {
        //初始化websocket
        initConn() {
            let socket = new WebSocket(
                process.env.VUE_APP_BASE_API_SOCKET +
                    "/" +
                    this.$store.state.user.name
            );
            this.socket = socket;
            this.socket.onmessage = this.OnMessage;
            this.socket.onopen = this.OnOpen;
        },
        OnOpen() {
            let mes = {
                from: this.$store.state.user.name,
                chatType: 0,
                content: "请求同步在线",
                msgType: 6,
                to: "server",
            };
            this.socket.send(JSON.stringify(mes));
        },
        OnMessage(e) {
            const redata = JSON.parse(e.data);
            this.server = redata.extras;
        },
        // 自适应弹框宽度
        setDialogWidth() {
            console.log(document.body.clientWidth);
            var val = document.body.clientWidth;
            const def = 1100; // 默认宽度
            if (val < def) {
                this.dialogWidth = "100%";
            } else {
                this.dialogWidth = def + "px";
            }
        },
        // 公告点击事件
        openContent(data) {
            this.$router.push({
                path: "/notice/view",
                query: { noticeId: data.id },
            });
            this.$nextTick(() => {
                updateNoticeByView(noticeId).then((res) => {});
            });
        },

        moreContent() {
            alert("暂未实现");
        },

        //公告通知日志列表查询
        fetchNoticeList() {
            noticeList({
                params: { type: 0 },
                pageIndex: 1,
                pageSize: 18,
            }).then((res) => {
                this.notices = res.data.data;
            });
            noticeList({
                params: { type: 1 },
                pageIndex: 1,
                pageSize: 15,
            }).then((res) => {
                this.notifys = res.data.data;
            });
            noticeList({
                params: { type: 2 },
                pageIndex: 1,
                pageSize: 7,
            }).then((res) => {
                this.journals = res.data.data;
                this.activeName = this.journals[0].id;
            });
        },

        //可视化统计
        drawPieChart() {
            getStatistics().then((res) => {
                if (res.code != 200) {
                    this.$message({
                        type: "success",
                        message: response.message,
                    });
                }
                var chartDom = document.getElementById("chartPie");
                var myChart = echarts.init(chartDom);
                var array = [];
                for (let i = 0; i < res.data.length; i++) {
                    array.push({
                        name: res.data[i].typeName,
                        value: res.data[i].count,
                    });
                }
                if (array.length == 0) {
                    array.push({
                        name: "暂无数据",
                        value: 0,
                    });
                }
                this.option.series[0].data = array;
                this.option && myChart.setOption(this.option);
            });
        },
        bigChartsStatistics() {
            statistics().then((res) => {
                if (res.code != 200) {
                    this.$message({
                        type: "success",
                        message: response.message,
                    });
                }
                var dom = document.getElementById("bigChart");
                var bigData = echarts.init(dom);
                var array = [];
                for (let i = 0; i < res.data.length; i++) {
                    array.push({
                        name: res.data[i].address,
                        value: res.data[i].quantity,
                    });
                }
                if (array.length == 0) {
                    array.push({
                        name: "暂无数据",
                        value: 0,
                    });
                }
                this.optionLog.series[0].data = array;
                this.optionLog && bigData.setOption(this.optionLog);
            });
        },
    },
};
</script>

<style  scoped>
/* //首页样式设置 */
.dashboard {
    width: 100%;
    height: 100%;
    padding: 5px;
    margin: 10px;
}

/* //图表相关样式 */
.pie-wrap {
    width: 100%;
    height: 300px;
    display: flex;
    justify-content: center;
}
.bigChart {
    width: 100%;
    height: 450px;
}
/* //走马灯样式 */
.carousel_title {
    text-align: center;
    font-size: 16px;
}
.el-carousel_item {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.carousel_img {
    max-width: 100%;
    max-height: 100%;
}

/* 公告列表样式 */
.notice-link {
    margin-top: 3%;
}
/* 查看点击弹框 */
</style>
